<template>
  <div>
    <div class="bidWai">
      <el-container>
        <el-main>
          <div class="gwrap6">
            <!-- 音乐 -->
            <div class="musicDetail">
              <div class="lyrics">
                <div class="picInfo">
                  <div class="u-cover">
                    <span class="zhegai"></span>
                    <img v-lazy="picUrl1">
                  </div>
                  <div class="outlink">
                    <i class="iconfont icon-yinle"></i>
                    <a href="#">生成外链播放器</a>
                  </div>
                </div>
                <!-- 右边歌词 -->
                <div class="geciInfo">
                  <div class="hd">
                    <i class="iconfont icon-biaoqian"></i>
                    <span>{{songDetail[0].name}}</span>
                  </div>
                  <p class="des">
                    <span>歌手：</span>
                    <a
                      href="#"
                      @click.prevent="goArtisterPage(songDetail[0].ar[0].id)"
                    >{{songDetail[0].ar[0].name}}</a>
                  </p>
                  <p class="des">
                    <span>所属专辑：</span>
                    <a
                      href="#"
                      @click.prevent="goAlbumPage(songDetail[0].al.id)"
                    >{{songDetail[0].al.name}}</a>
                  </p>
                  <div class="btns">
                    <a
                      href="#"
                      class="bo"
                      @click.prevent="playMusic(songDetail[0].id)"
                    ><i class="iconfont icon-bofang"></i>播放</a>
                    <a
                      href="#"
                      class="jia"
                    ><i class="iconfont icon-hao"></i></a>
                    <a href="#"><i class="iconfont icon-tianjiawenjianjia"></i></a>
                    <a href="#"><i class="iconfont icon-fenxiang"></i>10899</a>
                    <a href="#"><i class="iconfont icon-xiazai1"></i>下载</a>
                    <a href="#"><i class="iconfont icon-pinglun"></i>207992</a>
                  </div>
                  <div
                    class="mainMusic"
                    v-for="(item,index) in lyricsObjArr2"
                    :key="index"
                  >
                    {{item.lyric}}
                    <br>
                  </div>
                </div>
              </div>
              <div class="error">

                <p><a href="#">报错</a></p>
              </div>
            </div>
            <!-- 评论 -->
            <div class="commo">
              <div class="comtit">
                <h3>评论</h3>
                <span>共9609条评论</span>
              </div>
              <div class="commain">
                <!-- 输入评论 -->
                <div class="iptarea">
                  <div class="head">
                    <img src="../../assets/image/default_avatar.jpg">
                  </div>
                  <div class="hflag">
                    <div class="shuqu">
                      <textarea
                        name=""
                        id=""
                        cols="85"
                        rows="10"
                        placeholder="评论"
                      ></textarea>
                    </div>
                    <div class="combtns">
                      <i class="iconfont icon-xiaolian"></i>
                      <i class="iconfont icon-aite"></i>
                      <a href="#">评论</a>
                    </div>
                    <div class="corr"></div>
                  </div>
                </div>
                <!-- 评论区 -->
                <div class="cmmts">
                  <h3 v-show="hotcomnum">精彩评论</h3>
                  <div
                    class="acom"
                    v-for="(item,index2) in comHotDate"
                    :key="index2"
                  >
                    <div class="head">
                      <img
                        v-lazy="item.user.avatarUrl"
                        @click="gouserHome(item.user.userId)"
                      >
                    </div>
                    <div class="cntwrap">
                      <div class="usersay">
                        <a
                          href="#"
                          @click.prevent="gouserHome(item.user.userId)"
                        >{{item.user.nickname}}</a>
                        <img src="../../assets/image/vip3.png">
                        “{{item.content}}”
                      </div>
                      <div class="myact">
                        <div class="time">{{item.time}}</div>
                        <a href="#"><i
                            class="iconfont icon-zan"
                            @click="dianzan(index2)"
                          ></i>
                          <!-- <i
                            class="iconfont icon-dianzan"
                            v-show="res.data.liked"
                            @click="dianzan(index)"
                          ></i> -->
                          ({{item.likedCount}})</a>
                        <span>|</span>
                        <a href="#">回复</a>
                      </div>
                    </div>
                  </div>
                  <h3>最新评论</h3>
                  <div
                    class="acom"
                    v-for="(item,index3) in comNewDate"
                    :key="'3'+index3"
                    v-show="comNewDate"
                  >
                    <div class="head">
                      <img
                        v-lazy="item.user.avatarUrl"
                        @click.prevent="gouserHome(item.user.userId)"
                      >
                    </div>
                    <div class="cntwrap">
                      <div class="usersay">
                        <a
                          href="#"
                          @click.prevent="gouserHome(item.user.userId)"
                        >{{item.user.nickname}}</a>
                        <img src="../../assets/image/vip3.png">
                        “{{item.content}}”
                      </div>
                      <div class="myact">
                        <div class="time">{{item.time}}</div>
                        <a href="#"><i class="iconfont icon-zan"></i>({{item.likedCount}})</a>
                        <span>|</span>
                        <a href="#">回复</a>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 页数 -->
                <div class="j-flag"></div>
              </div>
            </div>
          </div>
        </el-main>
        <el-aside width="270px">
          <p class="famil">相似歌曲</p>
          <ul>
            <li
              v-for="(item,index4) in simimusic"
              :key="index4"
              @click.prevent="tiao(item.id)"
            >
              <div class="txt">
                <div class="musicname">
                  <a href="#">{{item.name}}</a>
                </div>
                <div class="authname">
                  <span>{{item.artists[0].name}}</span>
                </div>
              </div>
              <div class="opr">
                <a href="#">
                  <i class="iconfont icon-bofang"></i>
                </a>
                <a href="#"></a>
                <i class="iconfont icon-hao"></i>
              </div>
            </li>
          </ul>
          <div class="moreInsl">
            <p class="duoduan">网易云音乐多端下载</p>
            <ul>
              <li class="fir">
                <a href="#">
                  <i class="iconfont icon-anzhuoshouji"></i>
                </a>
              </li>
              <li class="sec">
                <a href="#">
                  <i class="iconfont icon-windows"></i>
                </a>
              </li>
              <li class="thr">
                <a href="#">
                  <i class="iconfont icon-pingguoshouji"></i>
                </a>
              </li>
            </ul>
            <p class="last">同步歌单，随时畅听320k好音乐</p>
          </div>
          <a
            href="#"
            class="buc"
          >补充或修改歌曲资料&gt;</a>
          <br>
          <a
            href="#"
            class="buc"
          >用户wiki任务中心&gt;</a>
        </el-aside>
      </el-container>
    </div>
    <h1 @click="hah">歌曲详情----{{ids}}</h1>
  </div>
</template>

<script>
import axios from 'axios'
// import { connect } from 'net';
import bus from '../../eventbus'
export default {
  name: 'songDetail',
  // 得到了传的id
  // props: ['ids'],
  data () {
    return {
      ids: 0,
      songDetail: [
        // 因为获取数据是异步的，不写这样会报错但是不影响运行
        {
          name: '',
          ar: [
            {
              name: ''
            }
          ],
          al: {
            name: ''
          }
        }
      ],
      picUrl1: '',
      hotcomnum: false,
      newcomnum: false,
      comHotDate: [],
      comNewDate: [],
      geciarr: [],
      lyricsObjArr2: [],
      simimusic: [],
    }
  },
  created () {
    this.hah();
    this.geci();
    this.getcomm();
    this.getsimiMus();
  },
  watch: {
    watch: {
      // 监听到id变化
      ids (newVal, oldVal) {
        console.log('song的id变了：', newVal, oldVal)
        this.hah();
        this.geci();
        this.getcomm();
        this.getsimiMus();
      }
    },
  },
  methods: {
    // 播放音乐
    playMusic (id) {
      // 给home传id
      bus.$emit('musicid', id)
    },
    // 点击相似歌曲跳转到那个歌曲的页面
    tiao (i) {
      this.ids = i
      // 跳转
      this.$router.push({ path: '/song', query: { id: i } })
      this.hah();
      this.geci();
      this.getcomm();
      this.getsimiMus();
    },
    async hah () {
      this.ids = this.$route.query.id
      // console.log('ids:--------------', this.ids)
      // this.$router.back()
      // 判断是歌曲还是专辑
      let res = await axios.get('https://autumnfish.cn//song/detail?ids=' + this.ids)
      if (res.data.songs.length === 0) {
        // res = await axios.get('https://autumnfish.cn//album?id=' + this.ids)
        // 是专辑，跳转至专辑页面。
        this.$router.push({ path: '/discover/album/', query: { id: this.ids } })
      }
      this.songDetail = res.data.songs;
      this.picUrl1 = this.songDetail[0].al.picUrl
    },
    // 获取歌词
    async geci () {
      let res = await axios.get('https://autumnfish.cn//lyric?id=' + this.ids)
      const regNewLine = /\n/
      const lineArr = res.data.lrc.lyric.split(regNewLine) // 每行歌词的数组
      // console.log('---------------------')
      // console.log(lineArr)
      const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/
      const lyricsObjArr = [];
      lineArr.forEach(item => {
        if (item === '') return
        const obj = {}
        const time = item.match(regTime)
        obj.lyric = item.split(']')[1].trim() === '' ? '' : item.split(']')[1].trim()
        obj.time = time ? this.formatLyricTime(time[0].slice(1, time[0].length - 1)) : 0
        obj.uid = Math.random().toString().slice(-6)
        if (obj.lyric === '') {
          // console.log('这一行没有歌词')
        } else {
          lyricsObjArr.push(obj)
        }
      })
      // console.log('----------------------')
      // console.log(lyricsObjArr)
      this.lyricsObjArr2 = lyricsObjArr;

      // console.log(this.lyricsObjArr2)
    },
    formatLyricTime (time) { // 格式化歌词的时间 转换成 sss:ms
      const regMin = /.*:/
      const regSec = /:.*\./
      const regMs = /\./

      const min = parseInt(time.match(regMin)[0].slice(0, 2))
      let sec = parseInt(time.match(regSec)[0].slice(1, 3))
      const ms = time.slice(time.match(regMs).index + 1, time.match(regMs).index + 3)
      if (min !== 0) {
        sec += min * 60
      }
      return Number(sec + '.' + ms)
    },
    // 获取相似歌曲
    async getsimiMus () {
      let res = await axios.get('https://autumnfish.cn//simi/song?id=' + this.ids);
      // console.log(res.data.songs);
      this.simimusic = res.data.songs;
    },
    // 获取评论
    async getcomm () {
      let res = await axios.get('https://autumnfish.cn///comment/music?id=' + this.ids)
      // console.log(res)
      this.comHotDate = res.data.hotComments;
      if (this.comHotDate.length > 0) { this.hotcomnum = true }
      // console.log(this.comHotDate)
      this.comNewDate = res.data.comments;
      // console.log(this.comNewDate)
      if (this.comNewDate.length > 0) { this.newcomnum = true }
      // console.log('this.newcomnum', this.newcomnum)
    },
    dianzan (i) {
      this.comHotDate[i].liked = !this.comHotDate[i].liked;
    },
    // 点击歌手名字，跳转到歌手详情页
    goArtisterPage (id) {
      // console.log(id)
      this.$router.push({ path: '/artist', query: { id: id } })
    },
    // 点击专辑名字，跳转到专辑详情页
    goAlbumPage (id) {
      this.$router.push({ path: '/discover/album', query: { id: id } })
    },
    gouserHome (id) {
      this.$router.push({ path: '/user', query: { id: id } })
    }
  }
}
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}
.bidWai {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  .el-main {
    border-right: 1px solid #d3d3d3;
    .gwrap6 {
      padding: 47px 30px 40px 39px;
      .musicDetail {
        .lyrics {
          display: flex;
          justify-content: center;
          // 歌曲左侧：图片
          .picInfo {
            width: 206px;
            margin-right: 20px;
            .u-cover {
              position: relative;
              img {
                width: 130px;
                height: 130px;
                margin: 34px;
                z-index: 100;
              }
              .zhegai {
                position: absolute;
                width: 206px;
                height: 205px;
                top: -4px;
                left: -4px;
                background: url(../../assets/image/coverall.png);
                background-position: -140px -580px;
              }
            }
            .outlink {
              margin: 20px 0 0 46px;
              color: #0c73c2;
              .iconfont {
                font-size: 16px;
              }
              a {
                font-size: 12px;
                color: #0c73c2;
              }
            }
          }
          // 歌曲右侧：歌词
          .geciInfo {
            width: 414px;
            .hd {
              .iconfont {
                color: red;
                font-size: 20px;
              }
              span {
                margin-left: 10px;
                font-size: 24px;
              }
            }
            .des {
              margin: 10px 0;
              color: #999;
              font-size: 12px;
              a {
                text-decoration: none;
                color: #0c73c2;
                font-size: 12px;
              }
              a:hover {
                text-decoration: underline;
              }
            }
            .btns {
              margin-bottom: 25px;
              margin-right: -10px;
              a {
                text-decoration: none;
                color: #333;
                display: inline-block;
                margin-right: 6px;
                padding: 0 5px;
                height: 31px;
                line-height: 30px;
                min-width: 23px;
                border: 1px solid #f2f2f2;
                background-color: #f2f2f2;
                border-radius: 5px;
                font-size: 12px;
                text-align: center;
                .iconfont {
                  font-size: 13px;
                  margin-right: 5px;
                }
              }
              .bo {
                color: #fff;
                background-color: #4190d9;
                margin: 0;
                border: none;
                border-radius: 5px 0 0 5px;
                border-right: 1px solid #666;
              }
              .jia {
                color: #fff;
                background-color: #4190d9;
                border-radius: 0 5px 5px 0;
                border: none;
              }
            }
            .mainMusic {
              height: auto;
              margin-top: 13px;
              line-height: 15px;
              font-size: 12px;
              color: #333;
            }
          }
        }
        .error {
          text-align: right;
          margin-top: 48px;
          line-height: 30px;
          p {
            a {
              color: #999;
              font-size: 12px;
            }
          }
        }
      }
      // 评论
      .commo {
        margin-top: 40px;
        .comtit {
          height: 33px;
          border-bottom: 2px solid #c20c0c;
          display: flex;
          justify-content: left;
          align-items: center;
          h3 {
            font-size: 20px;
            font-weight: normal;
          }
          span {
            margin-left: 20px;
            color: #666;
            font-size: 12px;
          }
        }
        .commain {
          // 评论输入框
          .iptarea {
            margin-bottom: 20px;
            display: flex;
            justify-content: left;
            align-items: center;
            margin-top: 20px;
            .head {
              width: 50px;
              height: 50px;
              margin-right: 20px;
              margin-bottom: 35px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .hflag {
              .shuqu {
                padding-right: 14px;
                textarea {
                  height: 50px;
                  display: block;
                  padding: 5px 6px 6px;
                  border: 1px solid #cdcdcd;
                  border-radius: 2px;
                  line-height: 19px;
                  box-sizing: content-box;
                  resize: none;
                  overflow: auto;
                  font-size: 12px;
                  color: #333;
                }
              }
              .combtns {
                padding: 0 10px;
                padding-top: 10px;
                .iconfont {
                  float: left;
                  margin: 0px 10px 0 0;
                  cursor: pointer;
                }
                a {
                  text-decoration: none;
                  float: right;
                  font-size: 12px;
                  display: inline-block;
                  width: 46px;
                  height: 25px;
                  color: #fff;
                  background-color: #4391da;
                  text-align: center;
                  line-height: 25px;
                }
              }
            }
          }
          // 评论区
          .cmmts {
            h3 {
              height: 20px;
              border-bottom: 1px solid #cfcfcf;
              font-weight: normal;
              font-size: 14px;
            }
            .acom {
              padding: 15px 0;
              border-top: 1px solid #ccc;
              display: flex;
              justify-content: left;
              // align-items: center;
              .head {
                width: 50px;
                height: 50px;
                margin-right: 10px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .cntwrap {
                width: 100%;
                .usersay {
                  width: 100%;
                  overflow: hidden;
                  line-height: 20px;
                  font-size: 12px;
                  color: #333;
                  a {
                    text-decoration: none;
                    font-size: 12px;
                    margin-right: 5px;
                    color: #0c73c2;
                  }
                  a:hover {
                    text-decoration: underline;
                  }
                  img {
                    height: 12px;
                    margin-right: 5px;
                  }
                }
                .myact {
                  margin-top: 15px;
                  text-align: right;
                  .time {
                    font-size: 12px;
                    float: left;
                    margin: 0 !important;
                    color: #999;
                  }
                  a {
                    font-size: 12px;
                    text-decoration: none;
                    color: #999;
                  }
                  span {
                    margin: 0 8px;
                    color: #ccc;
                  }
                  .iconfont {
                    margin-right: 5px;
                    vertical-align: -2px;
                    font-size: 12px;
                    color: skyblue;
                  }
                }
              }
            }
          }
          // 页数
          .j-flag {
          }
        }
      }
    }
  }
  .el-aside {
    padding: 20px 40px 40px 30px;
    .famil {
      height: 23px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
      color: #333;
      font-size: 14px;
    }
    ul {
      margin-bottom: 25px;
      font-size: 12px;
      color: #333;
      margin: 0;
      padding: 0;
      li {
        list-style: none;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .txt {
          .musicname {
            width: 156px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            a {
              color: #333;
              text-decoration: none;
            }
            a:hover {
              text-decoration: underline;
            }
          }
          .authname {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            color: #999;
          }
        }
        .opr {
          a {
            text-decoration: none;
            margin-right: 16px;
            color: #333;
            .iconfont {
              font-size: 12px;
            }
          }
        }
      }
    }
    .moreInsl {
      margin: 20px 0;
      padding-bottom: 20px;
      .duoduan {
        height: 23px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
        color: #333;
        font-size: 12px;
        font-weight: 600;
      }
      ul {
        margin: 0;
        padding: 0;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        li {
          list-style: none;
          a {
            text-decoration: none;
            .iconfont {
              font-size: 45px;
              color: #c2c2c2;
            }
          }
        }
        .fir {
          a {
            width: 42px;
            height: 48px;
          }
        }
        .sec {
          width: 60px;
          height: 48px;
          margin: 0 26px 0 30px;
        }
        .thr {
          width: 42px;
          height: 48px;
        }
      }
      .last {
        font-size: 12px;
        color: #999;
      }
    }
    .buc {
      text-decoration: none;
      color: #333;
      font-size: 12px;
    }
    .buc:hover {
      text-decoration: underline;
    }
  }
}
</style>
